/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapDrawWidget: React.FC = () => {
    function componentDid() {

        esriLoader.loadModules([
            'esri/map',
            "esri/dijit/Measurement",
            "dojo/dom",
            "esri/units",
        ]).then(([Map, Measurement, dom, Units]) => {
            const map = new Map('mapCon', {
                basemap: 'satellite',
                center: [-122.45, 37.75],
                zoom: 17
            });

            var measurement = new Measurement({
                map: map,
                defaultAreaUnit: Units.SQUARE_MILES,
                defaultLengthUnit: Units.KILOMETERS
              }, dom.byId("measurementDiv"));
              measurement.startup();
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon">
            <div id="measurementDiv"></div>
        </div>
    )
}
